<template>
	<view class="body">
		<video class="video" v-if="videoUrl!=''" :poster="pic" :autoplay="true" :show-mute-btn="true" :title="title" :page-gesture="true" :src="videoUrl"></video>
		<view class="video_bio" v-else></view>
		<view class="info">
			<text class="title">{{title}}</text>
			<text class="intro">{{intro}}</text>
		</view>
		<view class="cell-box" v-if="videoList.length>0">
			<view class="cell-item" v-for="(item,index) in videoList[current].urlList" :key="index"
				@click="btnClick(item,index)"
				v-bind:style="[{background:currentIndex==index?'#EE5A24':'',color:currentIndex==index?'#ffffff':''}]">
				<view class="cell-text">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import {
		siteUrls
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				url: '',
				intro: "", 
				isParse: true,
				pic: "",
				resourceUrl: "", 
				title: "",
				videoUrl: "",
				videoList: [],
				vid: "",
				current: 0,
				currentIndex: 0,
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: "正在加载..."
			});
			var that = this;
			that.url = uni.getStorageSync('url');
			// 获取设置的资源站
			uni.getStorage({
				key: 'url',
				success: function(res) {
					that.url = res.data
				}
			});
			uni.request({
				url: that.url,
				data: {
					ac: 'videolist',
					ids: e.id
				},
				method: "GET",
				header: {
					"content-type": "application/json"
				},
				success: function(res) {
					uni.hideLoading();
					console.log(res)
					var i = res.data.list[0]['vod_play_url'],
						a = [];
					// for (var o in i) {
					var r = {},
						n = [],
						d = [];
					
					// 字符串替换
					console.log(i);
					console.log('------------');
					i = i.replace("$$$", "#");
					console.log(i);
					if (i.indexOf("#") > 0) {
						n = i.split("#");
						console.log(n);
						for (var l in n) {
							c = {
								title: n[l].split("$")[0],
								url: n[l].split("$")[1]
							};
							console.log(c);
							if(c["url"].includes('.m3u8')){
								d.push(c); 
							}
						}
					} else if (2 == i.split("$").length) {
						var c = {
							title: i.split("$")[0],
							url: i.split("$")[1]
						};
						if(c["url"].includes('.m3u8')){
							d.push(c); 
						}
						// d.push(c);
					}
					
					 r.urlList = d, a.push(r);
					 console.log(r)
					// }
					that.videoList = a;
					// that.isParse = a[0].isParse;
					that.title = res.data.list[0].vod_name;
					that.pic = res.data.list[0].vod_pic;
					that.videoUrl = a[0].urlList[0].url;
					that.resourceUrl = a[0].urlList[0].title;
					that.intro = res.data.list[0].vod_blurb;
				},
				fail: function() {
					uni.hideLoading();
					uni.showModal({
						title: "网络错误",
						content: "网络出错，请刷新重试",
						showCancel: !1
					});
				}
			})
		},
		methods: {
			change(index) {
				this.current = index;
				this.isParse = this.videoList[index].isParse;
				// this.play();
			},
			btnClick(item, index) {
				this.videoUrl = item.url;
				this.resourceUrl = item.title;
				this.currentIndex = index;
				// this.play();
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.video {
		width: 100%;
		height: 400rpx;
	}

	.video_bio {
		width: 100%;
		height: 400rpx;
		background-color: black;
	}

	.info {
		padding: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			padding-top: 15rpx;
			padding-bottom: 15rpx;
		}

		.intro {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}
	}

	.cell-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx;

		.cell-item {
			width: 220rpx;
			height: 70rpx;
			display: inline-block;
			background-color: #F8F8F8;
			border-radius: 10rpx;
			margin: 10rpx;

			.cell-text {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>